<template>
  <div id="diagTeDrawerDiv" v-if="drawerTemp" class="overlay" :class="{ 'fade-in': visible }">
    <Splitpanes class="default-theme" horizontal>
      <Pane>
        <el-scrollbar>
          <div class="diag-desc" v-for="(desc,idx) in typeList" :key="desc.id">
            <el-tag type="info" size="small" class="text-left flex justify-start" style="width:100%">
              <div class="text-left" style="width:100%">
                <div class="margin-bottom-sm">
                  <span class="bg-blue light radius round padding-lr-xs margin-right-xs">{{`${idx+1}`}}</span>
                  <span style="margin-right: 5px" v-html="desc.descText ? desc.descText.replace(/\n|\r\n/g, '<br>') : ''"></span>
                </div>
                <div class="flex justify-start margin-top-xs">
                  <el-button class="diag-btn" type="warning" @click="selectDiagDesc(desc)">替换</el-button>
                  <el-button class="diag-btn" type="success" @click="addDiagDesc(desc)">追加</el-button>
                </div>
              </div>
            </el-tag>
          </div>
        </el-scrollbar>
      </Pane>
    </Splitpanes>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, getCurrentInstance, onMounted, onUnmounted } from 'vue';
import { IsEmpty } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import request from '@/api';
import { Splitpanes, Pane } from 'splitpanes';

let { proxy }: any = getCurrentInstance();
let drawerTemp = ref(false);
const showClassName = ref('');
let rowObj = reactive({});
const descType = ref('');
//暴露属性和方法
defineExpose({
  initPage,
  colseTypeCodeDrawer
});

onMounted(() => {
  document.addEventListener('click', colseTypeCodeDrawer);
});

onUnmounted(() => {
  document.removeEventListener('click', colseTypeCodeDrawer);
});
function initPage(row: any, type: any) {
  typeList.length = 0;
  rowObj = row;
  descType.value = type;
  if (showClassName.value != type) {
    showClassName.value = type;
  }
  findDiagnosTypeAndTemp();
  drawerTemp.value = true;
}

let typeList: any = reactive([]); //最左侧字典分类列表数据

function findDiagnosTypeAndTemp() {
  typeList.length = 0; //放入数据前清空数据
  const url = '/lis/cri/criTemplate/findCriTemplateList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        diagnosType: descType.value
      }
    })
    .then((res: any) => {
      typeList.push(...res.data);
    })
    .catch((err: any) => {
      VxeMessage('获取字典分类列表失败', VxeNotifyType.error);
    });
}

function selectDiagDesc(desc) {
  if (descType.value == 'xjpymsjg') {
    rowObj.treatmentMeasure = desc.descText;
  }
  if (descType.value == 'xjpyzjpy') {
    rowObj.treatmentMeasure = desc.descText;
  } else {
    rowObj.treatmentMeasure = desc.descText;
  }
  proxy.$emit('sltDiagnosTempInfo', rowObj);
  drawerTemp.value = false;
}

function addDiagDesc(desc) {
  
 
  if (descType.value == 'xjpymsjg') {
    rowObj.treatmentMeasure = rowObj.treatmentMeasure + desc.descText;
  }
  if (descType.value == 'xjpyzjpy') {
    rowObj.treatmentMeasure = rowObj.treatmentMeasure + desc.descText;
  } else {
    rowObj.treatmentMeasure = rowObj.treatmentMeasure + desc.descText;
  }
  proxy.$emit('sltDiagnosTempInfo', rowObj);

  drawerTemp.value = false;
}

//可以考虑重写这个函数实现不依赖父组件
function colseTypeCodeDrawer() {
  if (drawerTemp.value && !event.target.closest('#diagTeDrawerDiv') && !event.target.closest('.' + descType.value)) {
    drawerTemp.value = false;
    showClassName.value = '';
  }
}
</script>

<style lang="scss" scoped>
#diagTeDrawerDiv {
  z-index: 999999999;
  .mb10 {
    margin-bottom: 10px;
  }
  .no-data {
    width: 500px;
    height: 300px;
  }
  .el-main {
    padding: 0;
    overflow-y: auto;
  }
  .el-aside {
    border-left: $border-1;
  }
  .el-descriptions {
    width: 760px;
  }
  .el-descriptions-item__label {
    width: 70px;
  }
  .tools {
    padding-top: 0;
    margin-top: 0 !important;
    .btn-refresh {
      padding: 7px 15px;
    }
    .el-divider {
      margin-bottom: 15px;
      margin-top: 40px;
      width: 300px;
    }
    .content {
      width: 600px;
      .el-textarea__inner {
        font-size: 20px;
        // font-weight: bold;
      }
    }
    .large-img {
      width: 750px;
      height: 250px;
      margin-right: 10px;
      display: inline-block;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      position: relative;
      .camVideo {
        #video {
          width: 750px;
          height: 250px;
        }
        // #canvas {
        //   width: 670px;
        //   height: 400px;
        //   position: absolute;
        //   top: 0px;
        //   left: 0px;
        // }
        .btn {
          position: absolute;
          bottom: 20px;
          left: calc(50% - 50px);
          width: 100px;
          text-align: center;
          opacity: 0.8;
          z-index: 1;
        }
      }
      .no-data {
        width: 490px;
        height: 280px;
        img {
          object-fit: none;
        }
      }
      img {
        object-fit: contain;
        width: 100%;
        height: 100%;
      }
      .el-image {
        object-fit: contain;
        width: 100%;
        height: 100%;
      }
      .img-tools {
        position: absolute;
        top: 0px;
        right: -105px;
        .el-button {
          display: block;
          margin: 0 0 5px 0;
        }
      }
    }

    .img-list {
      width: 750px;
      height: 180px;
      overflow-x: auto;
      overflow-y: hidden;
      display: block;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px 5px 0 5px;
      margin-top: 5px;
      margin-bottom: 10px;
      position: relative;
      .el-upload-list__item {
        border: 0;
        width: 155px;
        height: 160px;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        border-radius: 0;
      }
      .el-upload-list__item-thumbnail {
        width: 140px;
        height: 140px;
        img {
          border-radius: 5px;
        }
      }
      .uploadImg {
        width: 75px;
        height: 75px;
        display: inline;
        margin-right: 10px;
        .el-upload--picture-card {
          width: 70px;
          height: 75px;
          line-height: 80px;
        }
      }
      .del-icon {
        position: absolute;
        right: 0;
        top: -4px;
        color: $info-color;
        opacity: 0.7;
        i {
          font-size: 16px;
        }
      }
      .ok-icon {
        position: absolute;
        right: 50px;
        bottom: -6px;
        color: $brand-color;
        i {
          font-size: 17px;
        }
      }
      .select-rpt {
        position: absolute;
        padding: 0;
        bottom: 0px;
        left: 30px;
        font-size: 16px;
      }
      .warning {
        color: $warning-color;
      }
    }

    .div-inline {
      display: inline-block;
      margin-right: 10px;
    }
  }

  .sign-img {
    width: 200px;
    height: 60px;
    border: $border-1;
  }
  .no-sign {
    color: $font-color-4;
    font-style: italic;
  }
  .img-diag {
    height: 90%;
    overflow: auto;
  }
  .el-drawer__header {
    margin-bottom: 5px;
  }
  .diag-temp {
    margin-top: 0px;
    .el-tag {
      height: 25px;
      line-height: 24px;
      cursor: pointer;
    }
    .diag-item {
      padding: 5px;
      .el-button {
        padding: 2px;
      }
      .item-children {
        margin: 5px 0 0 20px;
        .el-tag {
          margin-right: 10px;
        }
      }
    }
  }
  .diag-desc {
    line-height: 20px;
    font-size: 14px;
    padding: 5px 10px;
    .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-bottom: 1px;
      margin-right: 5px;
      border-radius: 4px;
      background-color: $font-color-3;
    }
    .el-tag {
      width: 100%;
      white-space: pre-wrap;
      height: auto;
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
  .diag-btn {
    padding: 2px 7px;
    margin-top: 3px;
  }
  .el-button--small {
    --el-button-size: 20px;
  }
  .el-divider {
    margin: 15px 5px;
  }
  .el-container {
    overflow-y: auto;
    .btn-viewtemp {
      position: absolute;
      top: 0;
      right: 10px;
    }
  }
}

.overlay {
  position: fixed;
  box-sizing: border-box;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: 3px 4px 16px 6px #858383;
  overflow: hidden;
  transition: all 0.3s;
  width: 18%;
  top: 110px;
  right: 1px;
  z-index: 9999;
  border: 2px solid #e6e6e6;
  height: calc(100% - 230px);
  margin-right: 80px;
  border-radius: 8px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-in-out;
}
</style>
